<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="20">
        <el-card>
          <div>
            <el-button type="primary" :disabled="positionList.length==0" plain @click="handleOrder">预订</el-button>
            <!-- <el-button type="primary" plain :disabled="!orderInfo.canModify">修改</el-button>-->
            <el-button type="primary" plain :disabled="positionList.length==0" @click="handleReserve">预留</el-button>
            <el-button type="primary" plain :disabled="!orderInfo.canPayReserve" @click="handlePayReserve">预留付款</el-button>

            <el-button type="warning" plain :disabled="!orderInfo.canUnSub" @click="handleCancelOrder">退订</el-button>
            <el-button type="primary" plain :disabled="!orderInfo.canPay" @click="handlePayOrder">付款</el-button>
            <el-button type="primary" plain @click="handleLock">锁场</el-button>
            <el-button type="primary" plain :disabled="!orderInfo.canUnLock" @click="handleUnLock">解锁</el-button>
            <!-- <el-button type="primary" plain :disabled="true">购物</el-button> -->
            <el-button type="primary" plain :disabled="!orderInfo.canRelease" @click="handleRelease">释放</el-button>
            <!-- <el-button type="primary" plain :disabled="true">加时</el-button> -->
            <el-button type="primary" plain @click="handleLongRent">长租</el-button>
            <el-button type="warning" plain :disabled="!orderInfo.canCancelLongRent" @click="handleCancelLongRent">长租退订</el-button>
            <!-- 预留批量退/锁场批量解锁 -->
            <el-button type="warning" plain :disabled="!orderInfo.canCancelFatherOrder" @click="handleCancelFatherOrder">主订单退订/解锁</el-button>
          </div>
          <div class="mt20 pore">
            <Calender ref="calender" :project-id="props.projectId" @selectedPosition="selectedPosition" @selectedOrder="selectedOrder" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>预约详情</span>
            </div>
          </template>
          <el-descriptions :column="1">
            <el-descriptions-item label="预约人:">{{ orderInfo.orderName }}</el-descriptions-item>
            <el-descriptions-item label="手机号:">{{ orderInfo.orderTelno }}</el-descriptions-item>
            <el-descriptions-item label="等级:">{{ orderInfo.memberCardName }}</el-descriptions-item>
            <el-descriptions-item label="支付状态: ">{{ orderInfo.payStatusStr }}</el-descriptions-item>
            <el-descriptions-item label="支付方式:">{{ orderInfo.payTypeStr }}</el-descriptions-item>
            <el-descriptions-item label="备注:">{{ orderInfo.remark }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <!--预约/预留-->
    <dialogReservation v-model="open_reservation" :type="reserveType" :position-list="positionList" @submitForm="refreshData(true)" />
    <!-- 找父 预留付款 -->
    <dialogPayReservation :props="dialogPayReservationProps" @submitForm="delayRefreshData" />
    <!--锁场-->
    <dialogLockField v-model="open_Lock" :project-id="props.projectId" @submitForm="refreshData(true)" />
    <!--长租-->
    <dialogLongRent v-model="open_LongRent" @submitForm="refreshData(true)" />
    <!-- 长租退订 -->
    <dialogCancelLongRent v-model="open_CancelLongRent" :data="orderInfo" @submitForm="refreshData(true)" />
    <!--付款-->
    <dialogPayment v-model="open_payment" :data="props_payment" :position-list="positionList" @submitForm="refreshData" />
    <!--退订-->
    <dialogUnSubscribe :props="dialogUnSubProps" @submitForm="refreshData" />
    <!--找父退订 预留/锁场-->
    <dialogCancelFatherOrder :props="dialogCancelFatherOrderProps" @submitForm="refreshData" />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { toRefs } from '@vueuse/shared'
import { getCurrentInstance } from '@vue/runtime-core'
import { dayjs } from 'element-plus'
import { unSubscribeOrder, releaseSiteOrder } from '../../../../api/ven/reserve'
import Calender from './components/calender'
import dialogReservation from './components/dialog/reservation'
import dialogPayReservation from './components/dialog/payReservation'
import dialogLockField from './components/dialog/lockField'
import dialogLongRent from './components/dialog/longRent'
import dialogCancelLongRent from './components/dialog/cancellongRent'
import dialogPayment from './components/dialog/payment'
import dialogUnSubscribe from '../components/dialog/unsubscribe'
import dialogCancelFatherOrder from '../components/dialog/cancelFatherOrder'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['selectedPosition'])

const props = defineProps({
  projectId: {
    type: String,
    default: null,
    required: true
  }
})

const data = reactive({
  positionList: [],
  orderInfo: {},
  open_reservation: false,
  reserveType: '1', // 1:预约;2:预留
  open_Lock: false,
  open_LongRent: false,
  open_CancelLongRent: false,
  open_payment: false,
  props_payment: {}
})
const { positionList, orderInfo, reserveType, open_reservation, open_Lock, open_payment, props_payment, open_LongRent, open_CancelLongRent } = toRefs(data)

const dialogUnSubProps = reactive({
  open: false,
  data: null
})

const dialogCancelFatherOrderProps = reactive({
  open: false,
  data: null
})

const dialogPayReservationProps = reactive({
  open: false,
  data: null
})

function handleOrder() {
  open_reservation.value = true
  reserveType.value = '1'
}


function handleReserve() {
  open_reservation.value = true
  reserveType.value = '2'
}

function handleCancelOrder() {
  _.assign(dialogUnSubProps, {
    open: true,
    data: { ...orderInfo.value }
  })
}
function handleCancelFatherOrder() {
  _.assign(dialogCancelFatherOrderProps, {
    open: true,
    data: { ...orderInfo.value }
  })
}
function handlePayReserve() {
  _.assign(dialogPayReservationProps, {
    open: true,
    data: { ...orderInfo.value }
  })
}
function handleLock() {
  open_Lock.value = true
}

function handleLongRent() {
  open_LongRent.value = true
}
function handleCancelLongRent() {
  open_CancelLongRent.value = true
}

function handleRelease() {
  proxy.$modal.confirm(`确定释放 ${orderInfo.value.siteName}  ${orderInfo.value.orderTimePeriod.split(',').join('-')} ？`)
    .then(() => {
      // proxy.$modal.msgError('接口开发中...', refreshData)
      releaseSiteOrder(orderInfo.value.id).then(res => {
        // 释放
        proxy.$modal.msgSuccess(res.msg, refreshData)
        // setTimeout(refreshData, 1000)
      })
    })
}

function selectedPosition(list) {
  positionList.value = list
  emit('selectedPosition', positionList.value)
}

function selectedOrder(order) {
  if (order.id) {
    switch (order.orderType) {
      case '0':// 普通预定
        order.canPay = checkCanPay(order)
        order.canUnSub = checkUnSub(order)
        order.canRelease = checkRelease(order)
        break
      case '1':// 长租预定
        order.canCancelLongRent = checkCanCancelLongRent(order)
        break
      case '2':// 预留
        order.canRelease = checkRelease(order)
        order.canCancelFatherOrder = checkCancelFatherOrder(order)
        order.canPayReserve = checkPayReserve(order)
        break
      case '3':// 锁场
        order.canUnLock = checkUnLock(order)
        order.canCancelFatherOrder = checkCancelFatherOrder(order)
        break
    }
  }
  orderInfo.value = order
}

const checkUnLock = (row) => {
  const canUnLock = true
  // const now = dayjs().valueOf()
  // const orderDate = dayjs(`${row.orderDate} ${row.orderTimePeriod.split(',')[0]}`).valueOf()
  // if (orderDate > now) {
  //   canUnLock = true
  // }

  return canUnLock
}
const checkCanCancelLongRent = (row) => {
  let canCancelLongRent = false
  const now = dayjs().valueOf()
  const orderDate = dayjs(`${row.orderDate} ${row.orderTimePeriod.split(',')[0]}`).valueOf()
  if (orderDate > now) {
    canCancelLongRent = true
  }

  return canCancelLongRent
}
const checkCanPay = (row) => {
  let canPay = false
  if (row.payStatus === '0') {
    canPay = true
  }
  return canPay
}
const checkUnSub = (row) => {
  let canBack = false
  // 未支付-已支付
  if (row.payStatus == '0' || row.payStatus == '1' || row.status == '0') {
    const now = dayjs().valueOf()
    const orderDate = dayjs(`${row.orderDate} ${row.orderTimePeriod.split(',')[0]}`).valueOf()
    if (orderDate > now) {
      canBack = true
    }
  }
  return canBack
}
const checkCancelFatherOrder = (row) => {
  let canBack = false
  // 预留/锁场
  if (row.releaseFlag == '0') {
    const now = dayjs().valueOf()
    const orderDate = dayjs(`${row.orderDate} ${row.orderTimePeriod.split(',')[0]}`).valueOf()
    if (orderDate > now) {
      canBack = true
    }
  }
  return canBack
}
const checkPayReserve = (row) => {
  let canBack = false
  // 预留
  if (row.payStatus == '0') {
    const now = dayjs().valueOf()
    const orderDate = dayjs(`${row.orderDate} ${row.orderTimePeriod.split(',')[0]}`).valueOf()
    if (orderDate > now) {
      canBack = true
    }
  }
  return canBack
}
const checkRelease = (row) => {
  let canBack = false
  const now = dayjs().valueOf()
  const orderDate = dayjs(`${row.orderDate} ${row.orderTimePeriod.split(',')[1]}`).valueOf()
  if (orderDate > now) {
    canBack = true
  }
  return canBack
}

function handleUnLock() {
  const title = `确定解锁 ${orderInfo.value.siteName} ${orderInfo.value.orderDate} 时间段 ${orderInfo.value.orderTimePeriod.split(',').join('~')} ？`
  proxy.$modal.confirm(title)
    .then(() => {
      unSubscribeOrder(orderInfo.value.id, { data: 0 }).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        setTimeout(refreshData, 1000)
      })
    })
}

function handlePayOrder() {
  open_payment.value = true
  props_payment.value = orderInfo.value
}
function delayRefreshData() {
  setTimeout(refreshData, 1000)
}
function refreshData(clearAll) {
  orderInfo.value = {}
  proxy.$refs.calender.refreshData(clearAll)
}

defineExpose({
  handleOrder
})

</script>

<style scoped>
  .pore{position: relative;overflow: auto;}
</style>
